import React from "react";
import logincss from "@/assets/css/login.module.less";
import { GoLogin } from "@/api/api";
import { useNavigate } from "react-router-dom";

import { message } from "antd";
import type { FormProps } from "antd";
import { Button, Checkbox, Form, Input } from "antd";
import {
  UserOutlined,
  CloseCircleOutlined,
  LockOutlined,
} from "@ant-design/icons";
type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};

function Login() {
  const navigate = useNavigate();
  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    const userinfo = {
      username: values.username,
      password: values.password,
    };
    const login = GoLogin(userinfo).then((res) => {
      if (res.data.code === 200) {
        message.success("登录成功");
        localStorage.setItem("token", res.data.data.token);
        localStorage.setItem("user_id", res.data.data.user_id);
        localStorage.setItem("image", res.data.data.image);
        localStorage.setItem("name", res.data.data.name);
        navigate("/home/index");
      } else {
        message.error("登录失败,请输入正确的账号密码");
      }
    });
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div className={logincss.box}>
      <div className={logincss.main}>
        <div className={logincss.left}>
          <div className={logincss.title}>
            <span className={logincss.titletop}>高效记录生活</span>
            <div className={logincss.titledown}>轻松收集,有效整理</div>
          </div>
          <div className={logincss.bgimg}></div>
        </div>
        <div className={logincss.right}>
          <div className={logincss.loginbox}>
            <div className={logincss.logo}>
              <div className={logincss.logoleft}></div>
              <div className={logincss.logintitle}>欢迎登录</div>
            </div>
            <div className={logincss.froms}>
              <Form
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <Form.Item<FieldType>
                  name="username"
                  rules={[{ message: "请输入你的用户名" }]}
                >
                  <Input
                    placeholder="用户名"
                    prefix={<UserOutlined className="site-form-item-icon" />}
                  />
                </Form.Item>

                <Form.Item<FieldType>
                  name="password"
                  rules={[{ message: "请输入你的密码!" }]}
                >
                  <Input.Password
                    placeholder="密码"
                    prefix={<LockOutlined className="site-form-item-icon" />}
                  />
                </Form.Item>

                <Form.Item>
                  <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox>记住密码</Checkbox>
                  </Form.Item>

                  <a
                    className="login-form-forgot"
                    href=""
                    style={{ marginLeft: "50%" }}
                  >
                    忘记密码
                  </a>
                </Form.Item>

                <Form.Item>
                  <Button
                    icon={<CloseCircleOutlined />}
                    style={{ width: "35%" }}
                    htmlType="reset"
                  >
                    重置
                  </Button>
                  <Button
                    type="primary"
                    htmlType="submit"
                    icon={<UserOutlined />}
                    style={{ marginLeft: "30%", width: "35%" }}
                  >
                    登录
                  </Button>
                </Form.Item>
              </Form>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Login;
